<template>
    <!--名师课堂-->
    <div class="contain">
        <div class="top-banner">
            <div class="banner"></div>
        </div>
        <div class="sel-box">
            <div class="sel-value" >
                {{ selectItem.first_name }}
            </div>
            <ul class="sel-fall">
                <li :class="{active: selectItem.first_name === ''}"
                    @click="handleSelectItem(null)">
                    全部科目
                </li>
                <li v-for="item in itemList" :key="item.id"
                    :class="{active: selectItem.first_name === item.first_name}"
                    @click="handleSelectItem(item)"
                >
                    {{ item.first_name }}
                </li>
            </ul>
        </div>
        <div class="teacher-box">
            <ul class="teacher-list">
                <li v-for="(teacher,index) in teacherList" :key="index">
                    <div class="intro-img">
                        <div class="img-warp">
                            <img v-bind:src="teacher.teac_pic_url" alt=""/>
                        </div>
                        <div class="intro-action-btn">
                            <a v-bind:href="teacher.video_url">立即试听</a>
                        </div>
                    </div>
                    <div class="intro-content">
                        <div class="item-title">{{ teacher.teacher }}</div>
                        <div class="item-content">
                            {{ teacher.jieshao }}
                        </div>
                        <div class="item-title">课程推荐</div>
                        <div class="intro-img-list">
                            <div class="intro-img"
                                 v-for="(lesson,index) in teacher.lessons"
                                 :key="index"
                                 @click="goBuy(lesson)"
                            >
                                <img v-bind:src="lesson.fengmian_pic_url" alt=""/>
                                <p class="les-name">{{ lesson.name }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="nodata" v-if="selectItem.first_name&&teacherList.length ===0">暂无数据</div>
        </div>
        <copyright></copyright>
    </div>
</template>
<script>
import copyright from '../../components/copyright';

export default {
    name: 'FamousCourse',
    components: {
        copyright
    },
    data() {
        return {
            account: '',
            selectItem: {
                first_name: '全部科目',
                value: ''
            },
            itemList: [],
            teacherList: []
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.ajaxGetZsList();
        this.ajaxGetTeacherList();
    },
    methods: {
        // 获取一级科目标签
        ajaxGetZsList() {
            let option = {
                pathName: 'doGetFLabs'
            };
            this.$api.ajaxData(option).then(res => {
                this.itemList = res.obj;
            });
        },
        handleSelectItem(item) {
            this.selectItem = item || {first_name: '全部科目'}
            this.ajaxGetTeacherList();
        },
        //    获取名师列表
        ajaxGetTeacherList() {
            console.log(this.selectItem)
            this.$api.ajaxData({
                pathName: 'doGetAPPMsst',
                authorization: true,
                params: {
                    firstLabName: this.selectItem.first_name==='全部科目'?'':this.selectItem.first_name
                }
            }).then(res => {
                this.teacherList = res.obj
                for (let t in this.teacherList) {
                    let teacherid = this.teacherList[t].id
                    // console.log(this.teacherList[t].id)
                    // this.teacherList[t].lessions = this.ajaxGetPCMsstGood(teacherid)
                    this.ajaxGetPCMsstGood(teacherid,t)
                }
            }).catch(()=>{
                this.teacherList = [];
            });
        },
        ajaxGetPCMsstGood(teacherid,index) {
            this.$api.ajaxData({
                pathName: 'doGetPCMsstGood',
                authorization: true,
                params: {
                    teach_id: teacherid
                }
            }).then(res => {
                let selfTeacher = this.teacherList[index]
                selfTeacher.lessons=res.obj
                this.$set(this.teacherList,index,selfTeacher)
                // this.teacherList[index].lessons = res.obj
            })
        },
        //课程推荐
        goBuy(course) {
            let routeData = this.$router.resolve({ name: 'landingPage', query: {  id: course.id } });
            window.open(routeData.href, '_blank');
        }

    }
};
</script>
<style scoped lang="scss">


.contain {
    font-size: 13px;

    .top-banner {
        position: relative;
        width: 100%;
        padding-top: 27.62%;
        margin: 20px 0;
        background: url("../../assets/image/back/u1408.png");
        background-repeat: no-repeat;
        background-size: cover;

        .banner {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("../../assets/image/back/u1409.png") no-repeat;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }

    .sel-box {
        position: relative;
        margin-bottom: 30px;
        cursor: pointer;
        z-index: 1;
        .sel-value {
            position: relative;
            width: 175px;
            height: 45px;
            padding: 0 10px;
            line-height: 45px;
            border-radius: 3px;
            background-color: rgba(255, 255, 255, 0);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(228, 228, 228, 1);
            color: #999;
            background: #fff;

            &:after {
                content: '';
                position: absolute;
                top: 16px;
                right: 10px;
                display: block;
                width: 8px;
                height: 8px;
                border-right: 1px solid #999;
                border-bottom: 1px solid #999;
                transform: rotate(45deg);
            }
        }

        .sel-fall {
            position: absolute;
            top: 45px;
            width: 175px;
            height: 0;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition-duration: 300ms;

            li {
                height: 40px;
                line-height: 40px;
                padding: 0 10px;
                background: #fff;
                color: #999;
                border-bottom: 1px solid #f6f6f6;

                &:hover {
                    background: #f6f6f6;
                }

                &.active {
                    color: #fff;
                    background: #006ADE;
                }
            }
        }

        &:hover {
            .sel-fall {
                height: 200px;
            }
        }
    }

    .teacher-box {
        padding: 30px 0;
        .teacher-list {
            li {
                position: relative;
                padding: 0 30px 30px;
                margin-bottom: 60px;
                border-right: 5px;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05), 0 -3px 10px rgba(0, 0, 0, 0.05);
                box-sizing: border-box;
                background: #fff;

                .intro-img {
                    position: relative;
                    top: -30px;
                    width: 50%;
                    float: left;
                    box-sizing: border-box;

                    .img-warp {
                        position: relative;
                        width: 100%;
                        padding-top: 65.22%;
                        border-radius: 5px;
                        background: #f6f6f6;

                        img {
                            position: absolute;
                            top: 0;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .intro-action-btn {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        height: 65px;
                        line-height: 65px;
                        font-size: 20px;
                        font-weight: bold;
                        background: #006ADE;
                        color: #fff;
                        text-align: center;
                        a {
                            color: #fff;
                        }
                    }
                }

                .intro-content {
                    float: right;
                    width: 50%;
                    padding: 0 0 0 30px;
                    box-sizing: border-box;

                    .item-title {
                        height: 50px;
                        line-height: 50px;
                        font-size: 18px;
                        font-weight: bold;
                        color: #333;
                    }

                    .item-content {
                        text-align: justify;
                        text-indent: 30px;
                        line-height: 30px;
                        margin-bottom: 20px;
                        /*@include ellipsis-line(5);*/
                    }
                    .intro-img-list {
                        display: flex;
                        flex-wrap: nowrap;
                        overflow: auto;

                        .intro-img {
                            width: 140px;
                            margin-right: 20px;

                            img {
                                width: 140px;
                                height: 93px;
                                background: #f6f6f6;
                            }
                        }

                        .les-name{
                            margin-top: 10px;
                        }
                    }
                }

                &:after {
                    content: '';
                    display: block;
                    clear: both;
                }

                &:nth-child(even) {
                    .intro-img {
                        float: right;
                    }

                    .intro-content {
                        float: left;
                        padding: 0 30px 0 0;
                        line-height: 1.5;

                        .item-title {
                            /*text-align: right;*/
                        }
                    }
                }
            }
        }
        .nodata {
            text-align: center;
        }
    }
}
</style>
